<template>
  <div class="home">
    <!--轮播图-->
    <div class="block text-center" style="height: 600px">
        <el-carousel height="auto" autoplay>
          <el-carousel-item style="height: 600px">
            <img src="/img/demo-swiper.jpg"  alt="图片"/>
          </el-carousel-item>
          <el-carousel-item style="height: 600px">
            <img src="/img/demo-swiper.jpg"  alt="图片"/>
          </el-carousel-item>
        </el-carousel>
    </div>
    <!--后台导航-->
    <div class="nav  bg-#f5f5f5 ">
      <ul class="nav-item  pt-30px flex px-300px flex-wrap justify-between">
        <li v-for="item in navList" class="nav-item py-30px list-none">
          <NuxtLink class="nav-link w-180px" to="/">{{ item.title }}</NuxtLink>
        </li>
      </ul>
    </div>
    <!--新闻资讯-->
    <div class="news px-300px">
      <div class="common-title">
        <div class="common-title-text ">
          <div class="title-text">
            <span class="">新闻</span>
            <span class="">资讯</span>
          </div>
          <span class="more text-#fff cursor-pointer" @click="goPath('news/dynamics')">更多</span>
        </div>
        <div class="sub-title pt-12px mb-20px text-#999999">
          News and information
        </div>
      </div>
      <div class="content flex">
        <div class="left-img flex-1 h-full overflow-hidden relative">
          <img src="/img/demo-news.jpeg" alt="" >
          <div class="introduction absolute bottom-0 ">
          </div>
          <div class="w-full h-50px lh-50px bottom-0 absolute text-center">
            <span class="text-#fff "> 2024年国家智能产业基金项目申报平台</span>
          </div>
        </div>
        <div class="right-list ml-10px flex-1 overflow-hidden">
          <ul class="w-full overflow-hidden">
            <li class="list-none list-item flex mb-20px w-full overflow-hidden" v-for="i in 4">
              <div class="date flex flex-col justify-center items-center mx-10px">
                <span class="text-#333 text-24px">01</span>
                <span class="text-#999999">2024-06-20</span>
              </div>
              <el-divider direction="vertical" class="my-auto! h-70%!"></el-divider>
              <div class="px-20px py-10px flex-1 overflow-hidden">
                <div class="title w-full">
                  <span class="text-#333333">科技日报》报道氢内燃机创新团队——顺着氢的“脾气科技日报》报道氢内燃机创新团队——顺着氢的“脾气</span>
                </div>
                <div class="text mt-5px text-#999">
                  北京理工大学于2006年建成了国内第一个氢内燃机综合开发试验平台北北京理工大学于2006年建成了国内第一个氢内燃机综合开发京理工大学于2006年建成了国内第一个氢内燃机综合开发试验平台
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!--重要活动-->
    <div class="activity px-300px">
      <div class="header my-20px h-100px flex">
        <div
          class="common-title "
          :class="{active: activitytab == 0 }"
          @click="activitytabChange(0)">
          <div class="common-title-text ">
            <div class="title-text">
              <span class="">重要活动</span>
            </div>
          </div>
          <div class="sub-title pt-12px mb-20px text-#999999">
            Important activities
          </div>
        </div>
        <el-divider direction="vertical" class="my-auto! mx-40px! h-70%!"></el-divider>
        <div
          class="common-title"
          :class="{active: activitytab == 1}"
          @click="activitytabChange(1)">
          <div class="common-title-text ">
            <div class="title-text">
              <span class="">通知公告</span>
            </div>
          </div>
          <div class="sub-title pt-12px mb-20px text-#999999">
            Notification Announcement
          </div>
        </div>
      </div>
      <div class="content  flex justify-between">
        <div class="w-30% h-306px bg-#fff  shadow-xl item" v-for="item in 3">
          <div class="date px-20px bg-#FFF3F3">
            <span class="day text-30px text-#7F0102">01</span>
            <span class="year-month text-#999 ml-20px">2024-04</span>
          </div>
          <div class=" ">
            <div class="title text-#333 text-18px font-500 px-20px pt-10px">
              【创新创业与成果转化主题讲座】第四期：创新创作...
            </div>
            <div class="text lh-25px  p-20px text-#999">
              为深入贯彻落实《北京理工大学关于促进科技成果转化推动学科性公司高质量发展的指导意见》，进一步统一思想、正本清源，推进...
            </div>
          </div>

        </div>
      </div>
      <div class="more text-center cursor-pointer" @click="goPath('news/events')">
        <span class="text">更多</span>
      </div>
    </div>
    <!-- 线上展厅   -->
    <div class="exhibition px-300px bg-#f5f5f5">
      <div class="common-title pt-20px">
        <div class="common-title-text ">
          <div class="title-text">
            <span class="">线上展厅</span>
          </div>
        </div>
        <div class="sub-title pt-12px mb-20px text-#999999">
          Online exhibition hall
        </div>
      </div>
      <div class="content grid grid-cols-3 gap-20px justify-between">
        <div class="item relative   bg-#fff  shadow-xl" v-for="item in 6">
          <img class="w-full h-full" src="/img/demo-online.jpg" alt=""/>
          <div class="absolute bottom-0 w-full text-center h-40px p-10px bg-#000000 opacity-20">
          </div>
          <div class="title absolute bottom-0 w-full">
            <div class="text-#fff text-center text-18px p-10px">
              2024年国家智能产业基金项目申报平台
            </div>
          </div>
        </div>
      </div>
      <div class="more text-center cursor-pointer" @click="goPath('/online-exhibition/case-studies')" >
        <span class="text">更多</span>
      </div>
    </div>

    <!-- 专家智库   -->
    <div class="expert px-300px ">
      <div class="common-title pt-20px">
        <div class="common-title-text ">
          <div class="title-text">
            <span class="">专家智库</span>
          </div>
        </div>
        <div class="sub-title pt-12px mb-20px text-#999999">
          Expert think tank
        </div>
      </div>
      <div class="content flex justify-around">
        <div class="item flex flex-col items-center " v-for="item in 4">
          <div class="w-40 h-40 rounded-50%  overflow-hidden ">
            <img class="w-full h-full object-cover" src="/img/demo-expert.jpg" alt=""/>
          </div>
          <div class="name text-#333 text-20px mt-20px font-650">
            王专家
          </div>
          <div class="position text-#999 mt-20px">
            中心副主任
          </div>
        </div>
      </div>
      <div class="more text-center">
        <span class="text cursor-pointer" @click="goExpert">更多</span>
      </div>
    </div>

    <!-- 合作伙伴   -->
    <div class="exhibition px-300px bg-#f5f5f5">
      <div class="common-title pt-20px">
        <div class="common-title-text ">
          <div class="title-text">
            <span class="">合作伙伴</span>
          </div>
        </div>
        <div class="sub-title pt-12px mb-20px text-#999999">
          cooperative partner
        </div>
      </div>
      <div class="content flex justify-around flex-wrap">
        <div class="item w-22% mb-20px  bg-#fff  shadow-xl " v-for="item in 12">
          <img class="w-full h-full" src="/img/home/logo-demo.png" alt=""/>
        </div>
      </div>
      <div class="more text-center cursor-pointer" @click="goPath('/partners/introductions')">
        <span class="text">更多</span>
      </div>
    </div>
  </div>
</template>

<script setup >
useHead({
  title: "首页",
});
const navList = [
  {
    icon: '',
    title: "项目申报"
  },
  {
    icon: '',
    title: "专家智库"
  },
  {
    icon: '',
    title: "成果发布"
  },
  {
    icon: '',
    title: "报名报价"
  },
  {
    icon: '',
    title: "需求发布"
  },
  {
    icon: '',
    title: "资金管理"
  },
]

const activitytab = ref(0)
const activitytabChange = (index) => {
  activitytab.value = index
}

function goExpert() {
  navigateTo({
    path: '/expert/introductions'
  })
}
function goPath(path) {
  navigateTo({
    path: path
  })
}
</script>

<style lang="scss">
html,
body {
  height: 100vh;
  overflow: auto;
}

.nav-link {
  display: inline-block;
  height: 56px;
  color: white;
  text-decoration: none;
  line-height: 56px;
  text-align: center;
  background-color: #7f0102;
  box-shadow: 0px 5px 10px 1px rgba(127, 1, 2, 0.31), inset 0px 4px 8px 1px rgba(255, 255, 255, 0.29);
  border-radius: 8px 8px 8px 8px;

}

.news {
  background: #f5f5f5;

  .common-title {
    &-text {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .title-text {
        font-size: 42px;
      }

      .more {
        text-align: center;
        width: 88px;
        height: 40px;
        line-height: 40px;
        background: #7F0102;
        border-radius: 35px 35px 35px 35px;
      }
    }
  }

  .content {
    .left-img {
      width: 590px;
      height: 440px;
      background: #FFFFFF;
      border-radius: 8px 8px 8px 8px;

      img {
        width: 100%;
        height: 100%;
      }

      .introduction {
        height: 50px;
        line-height: 50px;

        width: 100%;
        background: #000000;
        opacity: 0.28;
      }
    }

    .right-list {
      .list-item {
        //width: 590px;
        height: 95px;
        background: #FFFFFF;
        box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.08);
        border-radius: 8px 8px 8px 8px;
        cursor: pointer;
        transition: .3s all;
        overflow: hidden;
       
        .title {
          display: -webkit-box;
          -webkit-line-clamp: 1;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .text  {
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        &:hover {
          * {
            color: white;
          }

          background: #7f0102;
        }
      }
    }
  }
}

.activity {
  height: 600px;
  background-image: url("/img/home/activity.png");
  background-size: auto 100%;

  .common-title {
    cursor: pointer;

    .common-title-text {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #999;

      .title-text {
        font-size: 42px;
      }
    }

    &.active {
      .common-title-text {
        color: #333;
      }
    }
  }

  .content {
    .item {
      box-shadow: 0px 3px 6px 1px rgba(0, 0, 0, 0.08);
      border-radius: 8px 8px 8px 8px;
      cursor: pointer;
      overflow: hidden;
      .title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .text {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
  .more {
    .text {
      margin: 50px auto;
      display: inline-block;
      width: 113px;
      height: 40px;
      line-height: 40px;
      color: #FFFFFF;
      background: #7F0102;
      border-radius: 35px 35px 35px 35px;
      
    }
  }
  
}
.exhibition {
  .common-title {
    &-text {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title-text {
        font-size: 42px;
      }
    }
  }
  .more {
    .text {
      margin: 50px auto;
      display: inline-block;
      width: 113px;
      height: 40px;
      line-height: 40px;
      color: #FFFFFF;
      background: #7F0102;
      border-radius: 35px 35px 35px 35px;

    }
  }
}
.expert {
  background-image: url("/img/home/expert.png");
  .common-title {
    cursor: pointer;

    .common-title-text {
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #999;

      .title-text {
        font-size: 42px;
      }
    }

    &.active {
      .common-title-text {
        color: #333;
      }
    }
  }

  .more {
    .text {
      margin: 50px auto;
      display: inline-block;
      width: 113px;
      height: 40px;
      line-height: 40px;
      color: #FFFFFF;
      background: #7F0102;
      border-radius: 35px 35px 35px 35px;

    }
  }
}
</style>
